<template>
  <!-- 房客信息 -->
  <view class="roomsInfoList">
    <view class="content">
      <view class="search-view">
        <view class="search-date" @click="calendarShow = true">
          <image :src="baseImgUrl + 'day-icon.png'" mode="aspectFill"></image>
          {{ dayName }}
        </view>
        <view class="searInput">
          <u--input v-model="form.personName" shape="circle" placeholder="填写房客姓名" suffixIcon="search"
            suffixIconStyle="color: #747070" confirm-type="search" clearable @clear="inputHandle('isempty')"
            @confirm="inputHandle"></u--input>
        </view>
      </view>
      <u-gap height="5" bgColor="#F9F9F9"></u-gap>

      <view class="wrapper-content">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i" :data-url="`/roomsInfo/roomsNew/roomsNew?data=${encodeURIComponent(
              JSON.stringify({ orFlag: '3', ...v })
            )}`" @click="handleClickRouter">
            <view class="items">
              <view class="lt">
                <image :src="
                    v.personImage
                      ? imgPrefix + v.personImage
                      : baseImgUrl + 'queryFace-01.png'
                  " mode="aspectFill"></image>
              </view>
              <view class="rt">
                <view class="wrapper-facility">
                  <view class="facility-item">
                    <view class="textAlign label">房客姓名：</view>
                    <view class="value valueName">
                      <text>{{ v.personName }}</text>
                      <text class="job line-hidden">{{ v.roomNumber }}房</text>
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">身份证号：</view>
                    <view class="value valueName">
                      {{ hiddenInfo(v.idCard, 6, 4) }}
                    </view>
                  </view>
                  <view class="facility-item">
                    <view class="textAlign label">入住时间：</view>
                    <view class="value valueName">
                      {{ formatters(v.checkInTime, "YY/MM/DD HH:mm") }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
        <view v-if="!dataSource.length">
          <u-empty mode="list" text="还没有添加房客信息！" :icon="baseImgUrl + 'no-icon5.png'">
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns" v-if="paiNew">
      <button class="submit-btn" type="primary" :data-url="`/roomsInfo/roomsNew/roomsNew?data=${encodeURIComponent(
          JSON.stringify({ companyMessageId: options.companyMessageId })
        )}`" @click="handleClickRouter" icon="map" style="width: 100%">
        + 新增住宿房客
      </button>
    </view>

    <!-- 日历 -->
    <u-calendar :show="calendarShow" :defaultDate="defaultDate" :minDate="minDate" :maxDate="maxDate" :maxRange="30"
      mode="single" :rowHeight="50" @confirm="calConfirm" @close="calendarClose">
    </u-calendar>
  </view>
</template>

<script>
  import {
    tenantList,
    featuredNumber
  } from "@/api/home.js";
  import {
    handleClickRouter,
    formatters,
    dayTurnTime,
    hiddenInfo,
  } from "@/utils/util.js";

  const d = new Date();
  const year = d.getFullYear();
  let month = d.getMonth() + 1;
  month = month < 10 ? `0${month}` : month;
  let date = d.getDate();
  date = date < 10 ? `0${date}` : date;

  export default {
    name: "roomsInfoList",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        paiNew: uni.getStorageSync("paiNew"),
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        form: {},
        dayName: "",
        dayStart: "", //当前的开始时间
        dayEnd: "", //当前的结束时间
        calendarShow: false,
        defaultDate: `${year}/${month}/${date}`,
        minDate: "",
        // maxDate: `${year}-${month}-${date}`,
        maxDate: `${year}/${month}/${date} 23:59:59`,
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    onLoad(options) {
      this.options = options;
    },
    onShow() {
      this.dataSource = [];
      this.pageConfig.pageNo = 1;

      let day = formatters(new Date(), "YY/MM/DD");
      this.dayName = formatters(new Date(), "wordDay");
      this.dayStart = dayTurnTime(day + " 00:00:00");
      this.dayEnd = dayTurnTime(day + " 23:59:59");
      this.form.startTime = this.dayStart;
      this.form.endTime = this.dayEnd;

      this.getPerson();
      this.getList();

      let thirtyDays =
        new Date(new Date().toLocaleDateString()).getTime() -
        30 * 3600 * 24 * 1000; //最近30天
      // this.minDate = formatters(thirtyDays, "YY-MM-DD");
      this.minDate = formatters(thirtyDays, "YY/MM/DD") + " 00:00:00";
    },
    methods: {
      handleClickRouter,
      hiddenInfo,
      formatters,
      inputHandle(e) {
        this.dataSource = [];
        this.pageConfig.pageNo = 1;
        if (e == "isempty") {
          this.form.personName = "";
        }
        this.getList();
      },
      calendarClose() {
        this.calendarShow = false;
      },
      calConfirm(e) {
        this.calendarShow = false;
        if (!e[0]) {
          this.form.startTime = this.dayStart;
          this.form.endTime = this.dayEnd;
          return;
        }

        let eTime = formatters(e[0], "YY/MM/DD");
        this.form.startTime = dayTurnTime(eTime + " 00:00:00");
        this.form.endTime = dayTurnTime(eTime + " 23:59:59");
        this.dayName = formatters(e[0], "wordDay");

        this.dataSource = [];
        this.getPerson();
        this.getList();
      },
      scrollBottom() {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      getPerson() {
        let data = {
          companyMessageId: this.options.companyMessageId,
          personName: this.form.personName,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
        };

        featuredNumber(data).then((res) => {
          uni.setNavigationBarTitle({
            title: `入住房客：${res.result}人`,
          });
        });
      },
      getList() {
        let data = {
          companyMessageId: this.options.companyMessageId,
          personName: this.form.personName,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };

        tenantList(data).then((res) => {
          this.dataSource = this.dataSource.concat(res.result.records || []);
          this.pageConfig.total = res.result.total;
        });
      },
    },
  };
</script>

<style lang="scss">
  .roomsInfoList {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      // height: calc(100vh - 10px);  不要删;
      height: calc(100vh - 86px);
      overflow-y: auto;
    }

    .search-view {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 10rpx;
      background: #fff;

      .search-date {
        color: #2488f5;
        font-size: 30rpx;
        width: 320rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        background: #dcedff;
        border-radius: 44rpx;

        image {
          display: inline-block;
          margin-right: 10rpx;
          margin-top: 1rpx;
          width: 32rpx;
          height: 32rpx;
        }
      }

      .searInput {
        width: 360rpx;
      }
    }

    .wrapper-content {
      height: calc(100vh - 145px);
      // height: calc(100vh - 67px);  不要删

      .wrapper-item {
        padding: 30rpx;
        background: #ffffff;
        margin-bottom: 20rpx;

        .items {
          display: flex;

          .lt {
            width: 168rpx;
            height: 168rpx;
            margin-right: 30rpx;

            image {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }

          .rt {
            width: 425rpx;
            max-width: 425rpx;
          }
        }
      }
    }

    .wrapper-facility {
      padding-top: 10rpx;
      font-size: 26rpx;
      font-weight: 500;

      .facility-item {
        display: flex;
        margin-bottom: 20rpx;

        .lineLabel {
          line-height: 45rpx;
        }

        .label {
          color: #a1a1a1;
          width: 135rpx;
          min-width: 135rpx;
        }

        .job {
          display: inline-block;
          margin-left: 10rpx;
          padding: 0rpx 13rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #fff;
          background: linear-gradient(180deg, #ffe26e 0%, #ff8d26 100%);
          max-width: 184rpx;

          vertical-align: top;
        }
      }
    }
  }
</style>